<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Upload">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download">导出</el-button>
            </el-col>
            <right-toolbar></right-toolbar>
        </el-row>

        <!-- 数据展示表格 -->
        <el-table :data="categoryList" style="width: 100%" row-key="id" border lazy :load="fetchData"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="loding">
            <el-table-column prop="name" label="分类名称" />
            <el-table-column label="图标" prop="imageUrl" #default="scope">
                <img :src="scope.row.logo" width="50" />
            </el-table-column>
            <el-table-column label="排序" prop="orderNum" />
            <el-table-column label="状态" prop="status" #default="scope">
                {{ scope.row.status == 1 ? "正常" : "停用" }}
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" />
        </el-table>
    </div>


</template>

<script setup name="Category">
import { getCategoryListByParentId } from "@/api/product/category.js";
import { ref } from "vue";

//分类的分页数据
const categoryList = ref([]);
const loding = ref(true);

function getList(parentId) {
    loding.value = true;
    getCategoryListByParentId(parentId).then(res => {
        categoryList.value = res.data
        loding.value = false
    })
}

getList(0);
//延迟加载数据列表
const fetchData = async (row, treeNode, resolve) => {

    // 向后端发送请求获取数据
    const { data } = await getCategoryListByParentId(row.id);
    // 返回数据
    resolve(data)
}
</script>

<style></style>